<template>
  <div class="text-black" >
    <template v-if="props.loading">
      <span class="dark:text-white w-[4px] h-[20px] block animate-blink" />
    </template>
    <template v-else>
      <div class="leading-relaxed break-words">
        <div v-if="props.role!='user'" ref="vditor" v-html="text" class="vditor-reset"  />
        <div v-else class="vditor-reset" v-text="text" />
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
onMounted(() => {
  if(props.role !== 'user'){
    addText(props.content);
  }else
    text.value = props.content
})
const text = ref("")
const vditor = ref<HTMLElement>()
interface Props {
  role: string
  error?: boolean
  content: string
  loading?: boolean
}
const props = defineProps<Props>()
import useStore from "@/store";
const {webConfig}  = useStore()
import VditorPreview from 'vditor/dist/method.min'
const cdn = import.meta.env.VITE_CDN
const vditorCDN = cdn + '/vditor@3.9.5'
watch(() => props.content, (newValue, oldValue) => {
  addText(newValue);
});
const addText = async (chunk: string) => {
  //console.log("开始渲染-------------")
  //console.log(chunk)
  if(props.role == 'user')
    text.value =  chunk;
  else {
    const e = await VditorPreview.md2html(chunk,{})
    text.value = e;
    // console.log(vditor.value)
    // VditorPreview.highlightRender({},vditor.value)
    // VditorPreview.codeRender(vditor.value)
    // if(props.loading == false){
    //   VditorPreview.highlightRender(null,vditor.value,vditorCDN)
    // }
  }
}
defineExpose({
  addText
})

</script>

<style scoped lang="scss">
@import "../../../../src/assets/mixin";
.vditor-toolbar{
  //border-style: none !important;
}
.vditor-reset {

  font-size: 14px;
  @include mobile{
    font-size: 12px;
  }

}
</style>
